﻿/*
Powered by uimix.com;
date:2015-10-01;
*/

/*high*/


/*x7sale*/
.vivo-high-box .vivo-x7sale{background: #fff ;}
.vivo-high-box .vivo-x7sale i{background: #fff url(../Images/vm-h-x7sale-bg.jpg) center center no-repeat; background-size: auto 100%; height: 1180px; width: 2560px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -1460px; margin-top: -680px; z-index: -1;}
.vivo-high-box .vivo-x7sale .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-x7sale .figure{position: absolute; top: 50%; margin-top: -280px; width: 624px; height: 696px; right: 10px; z-index: 2; }
.vivo-high-box .vivo-x7sale .figure em{position: absolute; top: 0; left: 0; width: 100%;height: 100%; background-size: 624px 696px;}
.vivo-high-box .vivo-x7sale .figure em.f1{ background-image: url(../Images/vm-h-x7sale-figure1.png); }
.vivo-high-box .vivo-x7sale .figure em.f2{ background-image: url(../Images/vm-h-x7sale-figure2.png); }
.vivo-high-box .vivo-x7sale .title{position: absolute; width: 350px; height: 500px; top: 50%; margin-top: -110px; left: 8%; z-index: 9; }
.vivo-high-box .vivo-x7sale .title h2{display: block; position: relative; width: 280px; height: 120px; margin: auto; background-image: url(../Images/vm-h-x7sale-title.png); background-repeat: no-repeat; background-size: 280px 120px;}
/*big*/
.big-h .vivo-high-box .vivo-x7sale{}
.big-h .vivo-high-box .vivo-x7sale i{height: 1380px; margin-top: -790px; margin-left: -1500px;}
.big-h ul li.vivo-x7sale .figure{width: 780px;height: 870px; top: 50%; margin-top: -390px; right: -10%;}
.big-h ul li.vivo-x7sale .figure em{ background-size: 780px 870px;}
.big-h ul li.vivo-x7sale .figure em.f1{ background-image: url(../Images/vm-h-x7sale-figure1-big.png);}
.big-h ul li.vivo-x7sale .figure em.f2{ background-image: url(../Images/vm-h-x7sale-figure2-big.png);}
.big-h ul li.vivo-x7sale .title{margin-top: -150px; left: 5%;}
.big-h ul li.vivo-x7sale .title h2{width: 350px; height: 150px; background-image: url(../Images/vm-h-x7sale-title-big.png); background-size: 350px 150px;}
/*small*/
.small-h .vivo-high-box .vivo-x7sale{}
.small-h .vivo-high-box .vivo-x7sale i{height: 1000px; margin-top: -610px; margin-left: -1420px;}
.small-h ul li.vivo-x7sale .figure{width: 468px;height: 522px; top: 50%; margin-top: -200px; right: 120px; }
.small-h ul li.vivo-x7sale .figure em{ background-size: 468px 522px;}
.small-h ul li.vivo-x7sale .figure em.f1{ background-image: url(../Images/vm-h-x7sale-figure1-small.png); }
.small-h ul li.vivo-x7sale .figure em.f2{ background-image: url(../Images/vm-h-x7sale-figure2-small.png); }
.small-h ul li.vivo-x7sale .title{margin-top: -90px; left: 12%;}
.small-h ul li.vivo-x7sale .title h2{width: 210px; height: 90px; background-image: url(../Images/vm-h-x7sale-title-small.png); background-size: 210px 90px;}
/*mini*/
.mini-h .vivo-high-box .vivo-x7sale{}
.mini-h .vivo-high-box .vivo-x7sale i{height: 680px; margin-top: -400px; margin-left: -1380px;}
.mini-h ul li.vivo-x7sale .figure{width: 312px;height: 348px; top: 50%; margin-top: -120px; right: 190px;}
.mini-h ul li.vivo-x7sale .figure em{ background-size: 312px 348px;}
.mini-h ul li.vivo-x7sale .figure em.f1{ background-image: url(../Images/vm-h-x7sale-figure1-mini.png);}
.mini-h ul li.vivo-x7sale .figure em.f2{ background-image: url(../Images/vm-h-x7sale-figure2-mini.png);}
.mini-h ul li.vivo-x7sale .title{ margin-top: -50px; left: 17%;}
.mini-h ul li.vivo-x7sale .title h2{width:140px; height: 60px; background-image: url(../Images/vm-h-x7sale-title-mini.png); background-size: 140px 60px;}
/*x7sale*/
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    .vivo-high-box .vivo-x7sale i{background-image: url(../Images/vm-h-x7sale-bg-x2.jpg);}
    #vivo-high .vivo-high-box .vivo-x7sale .title h2{background-image: url(../Images/vm-h-x7sale-title-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7sale .figure .f1{ background-image: url(../Images/vm-h-x7sale-figure1-x2.png); }
    #vivo-high .vivo-high-box .vivo-x7sale .figure .f2{ background-image: url(../Images/vm-h-x7sale-figure2-x2.png); }
}



/*x7plus*/
.vivo-high-box .vivo-x7plus{background: #fff url(../Images/vm-h-x7plus-bg.jpg) center center no-repeat; background-size: cover;}
.vivo-high-box .vivo-x7plus .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-x7plus .figure{position: absolute; top: 50%; margin-top: -250px; width: 480px; height: 800px; right: 5%; z-index: 2; }
.vivo-high-box .vivo-x7plus .figure em.f1{position: absolute; top: 0; width: 480px;height: 800px; left: 0; background-image: url(../Images/vm-h-x7plus-figure.png);  background-size: 480px 800px;}
.vivo-high-box .vivo-x7plus .figure em.f2{position: absolute; top: -110px; width: 288px;height: 288px; left: 155px; z-index: 2; background-image: url(../Images/vm-h-x7plus-light.png);  background-size: 288px 288px;}
.vivo-high-box .vivo-x7plus .title{width: 350px; height: auto; top: 50%; margin-top: -90px; left: 8%; z-index: 2; z-index: 2;}
.vivo-high-box .vivo-x7plus .title h2{display: block; position: relative; width: 280px; height: 112px; margin: auto; background-image: url(../Images/vm-h-x7plus-title.png); background-repeat: no-repeat; background-size: 280px 112px;}
/*big*/
.big-h ul li.vivo-x7plus .figure{width: 600px;height: 1000px; top: 50%; margin-top: -300px; right: -12%;}
.big-h ul li.vivo-x7plus .figure em.f1{width: 600px; height: 1000px; background-image: url(../Images/vm-h-x7plus-figure-big.png);  background-size: 600px 1000px;}
.big-h ul li.vivo-x7plus .figure em.f2{ width: 360px;height: 360px; position: absolute; top: -150px; left: 190px; z-index: 2; background-image: url(../Images/vm-h-x7plus-light-big.png);  background-size: 360px 360px;}
.big-h ul li.vivo-x7plus .title{margin-top: -100px}
.big-h ul li.vivo-x7plus .title h2{width: 350px; height: 140px; background-image: url(../Images/vm-h-x7plus-title-big.png); background-size: 350px 140px;}
/*small*/
.small-h ul li.vivo-x7plus .figure{width: 360px;height: 600px; top: 50%; margin-top: -180px; right: 15%; }
.small-h ul li.vivo-x7plus .figure em.f1{position: absolute; top: 0; width: 360px;height: 600px; left: 0; background-image: url(../Images/vm-h-x7plus-figure-small.png);  background-size: 360px 600px;}
.small-h ul li.vivo-x7plus .figure em.f2{position: absolute; top: -85px; width: 216px;height: 216px; left: 115px; z-index: 2; background-image: url(../Images/vm-h-x7plus-light-small.png);  background-size: 216px 216px;}
.small-h ul li.vivo-x7plus .title{margin-top: -60px; left: 17%;}
.small-h ul li.vivo-x7plus .title h2{width: 207px; height: 84px; background-image: url(../Images/vm-h-x7plus-title-small.png); background-size: 210px 84px;}
/*mini*/
.mini-h ul li.vivo-x7plus .figure{width: 240px;height: 400px; top: 50%; margin-top: -100px; right: 18%;}
.mini-h ul li.vivo-x7plus .figure em.f1{position: absolute; top: 0; width: 240px;height: 400px; left: 0; background-image: url(../Images/vm-h-x7plus-figure-mini.png);  background-size: 240px 400px;}
.mini-h ul li.vivo-x7plus .figure em.f2{position: absolute; top: -65px; width: 144px;height: 144px; left: 95px; z-index: 2; background-image: url(../Images/vm-h-x7plus-light-mini.png);  background-size: 144px 144px;}
.mini-h ul li.vivo-x7plus .title{ margin-top: -50px; left: 17%;}
.mini-h ul li.vivo-x7plus .title h2{width:138px; height: 56px; background-image: url(../Images/vm-h-x7plus-title-mini.png); background-size: 138px 56px;}
/*x7plus*/
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    .vivo-high-box .vivo-x7plus{background-image: url(../Images/vm-h-x7plus-bg-x2.jpg);}
    #vivo-high .vivo-high-box .vivo-x7plus .title h2{background-image: url(../Images/vm-h-x7plus-title-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7plus .figure.f1{ background-image: url(../Images/vm-h-x7plus-figure-x2.png); }
    #vivo-high .vivo-high-box .vivo-x7plus .figure.f2{ background-image: url(../Images/vm-h-x7plus-light-x2.png); }
}



/*x7*/
.vivo-high-box .vivo-x7{background: #fff;}
.vivo-high-box .vivo-x7 .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-x7 .figure1{position: absolute; top: 36%; width: 440px;height: 500px; left: -13%; z-index: 4;  background-image: url(../Images/vm-h-x7-figure1.png);  background-size: 440px 500px;}
.vivo-high-box .vivo-x7 .figure2{position: absolute; top: 33%; width: 500px;height: 380px; left: 30%; z-index: 3;  background-image: url(../Images/vm-h-x7-figure2.png);  background-size: 500px 380px;}
.vivo-high-box .vivo-x7 .figure3{position: absolute; top: 57%; width: 500px;height: 260px; left: 57%; z-index: 2;  background-image: url(../Images/vm-h-x7-figure3.png);  background-size: 500px 260px;}
.vivo-high-box .vivo-x7 .figure4{position: absolute; bottom: 10%; width: 1120px;height: 80px; left: 50%; margin-left: -560px; z-index: 1;  background-image: url(../Images/vm-h-x7-figure4.jpg);  background-size: 1120px 80px;}
.vivo-high-box .vivo-x7 .title{width: 350px;height: auto; top: 18%; left: 50%; margin-left: -175px; z-index: 2;}
.vivo-high-box .vivo-x7 .title h2{display: block; position: relative; width: 276px; height: 112px; margin: auto; background-image: url(../Images/vm-h-x7-title.png); background-repeat: no-repeat; background-size: 276px 112px;}
/*big*/
.big-h ul li.vivo-x7 .figure1{width: 550px;height: 625px; top: 42%; left: -28%; background-image: url(../Images/vm-h-x7-figure1-big.png);  background-size: 550px 625px;}
.big-h ul li.vivo-x7 .figure2{width: 625px;height: 475px; top: 37%; left: 24%; background-image: url(../Images/vm-h-x7-figure2-big.png);  background-size: 625px 475px;}
.big-h ul li.vivo-x7 .figure3{width: 625px;height: 325px; top: 60%; left: 60%; background-image: url(../Images/vm-h-x7-figure3-big.png);  background-size: 625px 325px;}
.big-h ul li.vivo-x7 .figure4{width: 1400px;height: 100px; margin-left: -700px; background-image: url(../Images/vm-h-x7-figure4-big.jpg);  background-size: 1400px 100px;}
.big-h ul li.vivo-x7 .title h2{width: 345px; height: 140px; background-image: url(../Images/vm-h-x7-title-big.png); background-size: 345px 140px;}
/*small*/
.small-h ul li.vivo-x7 .figure1{width: 330px;height: 375px; top: 42%; left: 3%; background-image: url(../Images/vm-h-x7-figure1-small.png);  background-size: 330px 375px;}
.small-h ul li.vivo-x7 .figure2{width: 375px;height: 285px; top: 35%; left: 34%; background-image: url(../Images/vm-h-x7-figure2-small.png);  background-size: 375px 285px;}
.small-h ul li.vivo-x7 .figure3{width: 375px;height: 195px; top: 58%; left: 56%; background-image: url(../Images/vm-h-x7-figure3-small.png);  background-size: 375px 195px;}
.small-h ul li.vivo-x7 .figure4{width: 840px;height: 60px; margin-left: -420px; background-image: url(../Images/vm-h-x7-figure4-small.jpg);  background-size: 840px 60px;}
.small-h ul li.vivo-x7 .title h2{width: 207px; height: 84px; background-image: url(../Images/vm-h-x7-title-small.png); background-size: 207px 84px;}
/*mini*/
.mini-h ul li.vivo-x7 .figure1{width: 220px;height: 250px; top: 45%; left: 18%; background-image: url(../Images/vm-h-x7-figure1-mini.png);  background-size: 220px 250px;}
.mini-h ul li.vivo-x7 .figure2{width: 250px;height: 190px; top: 40%; left: 39%; background-image: url(../Images/vm-h-x7-figure2-mini.png);  background-size: 250px 190px;}
.mini-h ul li.vivo-x7 .figure3{width: 250px;height: 130px; top: 61%; left: 54%; background-image: url(../Images/vm-h-x7-figure3-mini.png);  background-size: 250px 130px;}
.mini-h ul li.vivo-x7 .figure4{width: 560px;height: 40px; margin-left: -280px; background-image: url(../Images/vm-h-x7-figure4-mini.jpg);  background-size: 560px 40px;}
.mini-h ul li.vivo-x7 .title h2{width:138px; height: 56px; background-image: url(../Images/vm-h-x7-title-mini.png); background-size: 138px 56px;}
/*x7*/
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    
    #vivo-high .vivo-high-box .vivo-x7 .title h2{background-image: url(../Images/vm-h-x7-title-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7 .figure1{background-image: url(../Images/vm-h-x7-figure1-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7 .figure2{background-image: url(../Images/vm-h-x7-figure2-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7 .figure3{background-image: url(../Images/vm-h-x7-figure3-x2.png);}
    #vivo-high .vivo-high-box .vivo-x7 .figure4{background-image: url(../Images/vm-h-x7-figure4-x2.jpg);}
}



/*x7live*/
.vivo-high-box .vivo-x7live{background: #fff; background: url(../Images/vm-h-x7live-bg.jpg) center center no-repeat; background-size: auto 100%;}
.vivo-high-box .vivo-x7live .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-x7live .title{width: 350px;height: auto; top: 50%; margin-top: -90px; left: 0; z-index: 2;}
.vivo-high-box .vivo-x7live .title h2{display: block; position: relative; width: 280px; height: 112px; margin: auto; background-image: url(../Images/vm-h-x7live-title.png); background-repeat: no-repeat; background-size: 280px 112px;}
/*big*/
.big-h ul li.vivo-x7live .title{margin-top: -100px; left: -5%;}
.big-h ul li.vivo-x7live .title h2{width: 350px; height: 140px; background-image: url(../Images/vm-h-x7live-title-big.png); background-size: 350px 140px;}
/*small*/
.small-h ul li.vivo-x7live .title{margin-top: -60px; left: 5%;}
.small-h ul li.vivo-x7live .title h2{width: 210px; height: 84px; background-image: url(../Images/vm-h-x7live-title-small.png); background-size: 210px 84px;}
/*mini*/
.mini-h ul li.vivo-x7live .title{margin-top: -50px; left: 10%;}
.mini-h ul li.vivo-x7live .title h2{width:140px; height: 56px; background-image: url(../Images/vm-h-x7live-title-mini.png); background-size: 140px 56px;}
/*x7live*/
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    
    #vivo-high .vivo-high-box .vivo-x7live{background-image: url(../Images/vm-h-x7live-bg-x2.jpg);}
    #vivo-high .vivo-high-box .vivo-x7live .title h2{background-image: url(../Images/vm-h-x7live-title-x2.png);}
}


/*szj*/
.vivo-high-box .vivo-szj{background: #fff;}
.vivo-high-box .vivo-szj .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-szj .figure{width: 1320px;height: 860px; bottom: 0; left: 2%; z-index: 2;  background-image: url(../Images/vm-h-szj-figure.jpg);  background-size: 1320px 860px;}
.vivo-high-box .vivo-szj .title{width: 350px;height: auto; top: 50%; margin-top: -90px; left: 0; z-index: 2;}
.vivo-high-box .vivo-szj .title h2{display: block; position: relative; width: 280px; height: 88px; margin: auto; background-image: url(../Images/vm-h-szj-title.png); background-repeat: no-repeat; background-size: 280px 88px;}
.vivo-high-box  ul li.vivo-szj .title .more span:after{background-position: -587px -137px;}
/*big*/
.big-h ul li.vivo-szj .figure{width: 1650px;height: 1075px;  bottom: 0; left: -10%; z-index: 2;  background-image: url(../Images/vm-h-szj-figure-big.jpg);  background-size: 1650px 1075px;}
.big-h ul li.vivo-szj .title{margin-top: -100px; left: -5%;}
.big-h ul li.vivo-szj .title h2{width: 350px; height: 110px; background-image: url(../Images/vm-h-szj-title-big.png); background-size: 350px 110px;}
/*small*/
.small-h ul li.vivo-szj .figure{width: 990px;height: 645px; bottom: 0; left: 5%; z-index: 2;  background-image: url(../Images/vm-h-szj-figure-small.jpg);  background-size: 990px 645px;}
.small-h ul li.vivo-szj .title{margin-top: -60px; left: 5%;}
.small-h ul li.vivo-szj .title h2{width: 210px; height: 66px; background-image: url(../Images/vm-h-szj-title-small.png); background-size: 210px 66px;}
/*mini*/
.mini-h ul li.vivo-szj .figure{width: 660px;height: 430px; bottom: 0; left: 20%; z-index: 2;  background-image: url(../Images/vm-h-szj-figure-mini.jpg);  background-size: 660px 430px;}
.mini-h ul li.vivo-szj .title{margin-top: -50px; left: 10%;}
.mini-h ul li.vivo-szj .title h2{width:154px; height: 48px; background-image: url(../Images/vm-h-szj-title-mini.png); background-size: 154px 48px;}
/*szj*/
@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    
    #vivo-high .vivo-high-box .vivo-szj .title h2{background-image: url(../Images/vm-h-szj-title-x2.png);}
    #vivo-high .vivo-high-box .vivo-szj .figure{background-image: url(../Images/vm-h-szj-figure-x2.jpg);}
}



/*xplay5a*/
.vivo-high-box .vivo-xplay5a{background: #fff url(../Images/vm-h-xplay5a-bg.jpg) center center no-repeat; background-size: cover;}
.vivo-high-box .vivo-xplay5a .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-xplay5a .figure{width: 480px;height: 712px; top: 50%; margin-top: -300px; right: 5%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-figure.png);  background-size: 480px 712px;}
.vivo-high-box .vivo-xplay5a .marv{width: 248px; height: 128px; position: absolute; top: 50%; margin-top: -360px; left: -5%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-marv.png);  background-size: 248px 128px;}
.vivo-high-box .vivo-xplay5a .title{width: 420px;height: auto; top: 50%; margin-top: -150px; left: 0; z-index: 2;}
.vivo-high-box .vivo-xplay5a .title h2{display: block; position: relative; width: 336px; height: 152px; margin: auto; background-image: url(../Images/vm-h-xplay5a-title.png); background-repeat: no-repeat; background-size: 336px 152px;}
/*big*/
.big-h ul li.vivo-xplay5a .figure{width: 600px;height: 890px; top: 50%; margin-top: -400px; right: -5%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-figure-big.png);  background-size: 600px 890px;}
.big-h ul li.vivo-xplay5a .marv{width: 310px;height: 168px; top: 50%; margin-top: -490px; left: -15%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-marv-big.png);  background-size: 310px 168px;}
.big-h ul li.vivo-xplay5a .title{margin-top: -220px; left: -5%;}
.big-h ul li.vivo-xplay5a .title h2{width: 420px; height: 190px; background-image: url(../Images/vm-h-xplay5a-title-big.png); background-size: 420px 190px;}
/*small*/
.small-h ul li.vivo-xplay5a .figure{width: 360px;height: 534px; top: 50%; margin-top: -220px; right: 15%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-figure-small.png);  background-size: 360px 534px;}
.small-h ul li.vivo-xplay5a .marv{width: 186px;height: 96px; top: 50%; margin-top: -250px; left: 5%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-marv-small.png);  background-size: 186px 96px;}
.small-h ul li.vivo-xplay5a .title{margin-top: -90px; left: 5%;}
.small-h ul li.vivo-xplay5a .title h2{width: 254px; height: 114px; background-image: url(../Images/vm-h-xplay5a-title-small.png); background-size: 252px 114px;}
/*mini*/
.mini-h ul li.vivo-xplay5a .figure{width: 240px;height: 356px; top: 50%; margin-top: -140px; right: 20%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-figure-mini.png);  background-size: 240px 356px;}
.mini-h ul li.vivo-xplay5a .marv{width: 124px;height: 64px; top: 50%; margin-top: -160px; left: 28%; z-index: 2;  background-image: url(../Images/vm-h-xplay5a-marv-mini.png);  background-size: 124px 64px;}
.mini-h ul li.vivo-xplay5a .title{margin-top: -70px; left: 20%;}
.mini-h ul li.vivo-xplay5a .title h2{width:168px; height: 76px; background-image: url(../Images/vm-h-xplay5a-title-mini.png); background-size: 168px 76px;}

    

/*v3*/
.vivo-high-box .vivo-v3{background: url(../Images/vm-h-v3-bg.jpg) center center no-repeat; background-size: cover;}
.vivo-high-box .vivo-v3 .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-v3 .figure{width: 1200px;height: 920px; top: 50%; margin-top: -370px; right: -50%; z-index: 2;}
.vivo-high-box .vivo-v3 .figure em{width: 100%;height: 100%; position: absolute; top: 0; right: 0;  background-size: 1200px 920px;}
.vivo-high-box .vivo-v3 .figure em.f1{background-image: url(../Images/vm-h-v3-figure.png); z-index: 2;}
.vivo-high-box .vivo-v3 .figure em.f2{background-image: url(../Images/vm-h-v3-shadow.png); z-index: 1;}
.vivo-high-box .vivo-v3 .title{width: 350px;height: auto; top: 50%; margin-top: -90px; left: 0; z-index: 2;}
.vivo-high-box .vivo-v3 .title h2{display: block; position: relative; width: 288px; height: 108px; margin: auto; background-image: url(../Images/vm-h-v3-title.png); background-repeat: no-repeat; background-size: 288px 108px;}
/*big*/
.big-h ul li.vivo-v3 .figure{width: 1500px;height: 1150px; top: 50%; margin-top: -500px; right: -75%; z-index: 2;}
.big-h ul li.vivo-v3 .figure em{background-size: 1500px 1150px;}
.big-h ul li.vivo-v3 .figure em.f1{background-image: url(../Images/vm-h-v3-figure-big.png); z-index: 2;}
.big-h ul li.vivo-v3 .figure em.f2{background-image: url(../Images/vm-h-v3-shadow-big.png); z-index: 1;}
.big-h ul li.vivo-v3 .title{margin-top: -100px; right: -5%;}
.big-h ul li.vivo-v3 .title h2{width: 360px; height: 135px; background-image: url(../Images/vm-h-v3-title-big.png); background-size: 360px 135px;}
/*small*/
.small-h ul li.vivo-v3 .figure{width: 900px; height: 690px; top: 50%; margin-top: -300px; right: -20%;}
.small-h ul li.vivo-v3 .figure em{background-size: 900px 690px;}
.small-h ul li.vivo-v3 .figure em.f1{background-image: url(../Images/vm-h-v3-figure-small.png); z-index: 2;}
.small-h ul li.vivo-v3 .figure em.f2{background-image: url(../Images/vm-h-v3-shadow-small.png); z-index: 1;}
.small-h ul li.vivo-v3 .title{margin-top: -60px; right: 5%;}
.small-h ul li.vivo-v3 .title h2{width: 216px; height: 81px; background-image: url(../Images/vm-h-v3-title-small.png); background-size: 216px 81px;}
/*mini*/
.mini-h ul li.vivo-v3 .figure{width: 560px;height: 400px; top: 50%; margin-top: -150px; right: 0;}
.mini-h ul li.vivo-v3 .figure em{background-size: 560px 400px;}
.mini-h ul li.vivo-v3 .figure em.f1{background-image: url(../Images/vm-h-v3-figure-mini.png); z-index: 2;}
.mini-h ul li.vivo-v3 .figure em.f2{background-image: url(../Images/vm-h-v3-shadow-mini.png); z-index: 1;}
.mini-h ul li.vivo-v3 .title{margin-top: -50px; right: 10%;}
.mini-h ul li.vivo-v3 .title h2{width:144px; height: 54px; background-image: url(../Images/vm-h-v3-title-mini.png); background-size: 144px 54px;}
/*v3*/




/*x6s*/
.vivo-high-box .vivo-x6s{background: #fdfdfd;}
.vivo-high-box .vivo-x6s .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-x6s .figure{width: 480px;height: 696px; top: 50%; margin-top: -300px; left: 5%; z-index: 2;}
.vivo-high-box .vivo-x6s .figure em{width: 100%;height: 100%; position: absolute; top: 0; left: 0;  background-size: 480px 696px;}
.vivo-high-box .vivo-x6s .figure em.f1{  background-image: url(../Images/vm-h-x6s-figure1.png);}
.vivo-high-box .vivo-x6s .figure em.f2{  background-image: url(../Images/vm-h-x6s-figure2.png);}
.vivo-high-box .vivo-x6s .figure em.f3{  background-image: url(../Images/vm-h-x6s-figure3.png);}
.vivo-high-box .vivo-x6s .title{width: 400px;height: auto; top: 50%; margin-top: -90px; right: 0; z-index: 2;}
.vivo-high-box .vivo-x6s .title h2{display: block; position: relative; width: 400px; height: 108px; margin: auto; background-image: url(../Images/vm-h-x6s-title.jpg); background-repeat: no-repeat; background-size: 400px 108px;}
/*big*/
.big-h ul li.vivo-x6s .figure{width: 600px;height: 870px; top: 50%; margin-top: -400px; left: -10%; z-index: 2; }
.big-h ul li.vivo-x6s .figure em{background-size: 600px 870px;}
.big-h ul li.vivo-x6s .figure em.f1{  background-image: url(../Images/vm-h-x6s-figure1-big.png);}
.big-h ul li.vivo-x6s .figure em.f2{  background-image: url(../Images/vm-h-x6s-figure2-big.png);}
.big-h ul li.vivo-x6s .figure em.f3{  background-image: url(../Images/vm-h-x6s-figure3-big.png);}
.big-h ul li.vivo-x6s .title{width: 500px;margin-top: -100px; right: -5%;}
.big-h ul li.vivo-x6s .title h2{width: 500px; height: 135px; background-image: url(../Images/vm-h-x6s-title-big.jpg); background-size: 500px 135px;}
/*small*/
.small-h ul li.vivo-x6s .figure{width: 360px;height: 522px; top: 50%; margin-top: -230px; left: 12%; z-index: 2;}
.small-h ul li.vivo-x6s .figure em{background-size: 360px 522px;}
.small-h ul li.vivo-x6s .figure em.f1{  background-image: url(../Images/vm-h-x6s-figure1-small.png);}
.small-h ul li.vivo-x6s .figure em.f2{  background-image: url(../Images/vm-h-x6s-figure2-small.png);}
.small-h ul li.vivo-x6s .figure em.f3{  background-image: url(../Images/vm-h-x6s-figure3-small.png);}
.small-h ul li.vivo-x6s .title{margin-top: -60px; right: 4%;}
.small-h ul li.vivo-x6s .title h2{width: 300px; height: 81px; background-image: url(../Images/vm-h-x6s-title-small.jpg); background-size: 300px 81px;}
/*mini*/
.mini-h ul li.vivo-x6s .figure{width: 240px;height: 348px; top: 50%; margin-top: -150px; left: 20%; z-index: 2;}
.mini-h ul li.vivo-x6s .figure em{background-size: 240px 348px;}
.mini-h ul li.vivo-x6s .figure em.f1{  background-image: url(../Images/vm-h-x6s-figure1-mini.png);}
.mini-h ul li.vivo-x6s .figure em.f2{  background-image: url(../Images/vm-h-x6s-figure2-mini.png);}
.mini-h ul li.vivo-x6s .figure em.f3{  background-image: url(../Images/vm-h-x6s-figure3-mini.png);}
.mini-h ul li.vivo-x6s .title{margin-top: -50px; right: 10%;}
.mini-h ul li.vivo-x6s .title h2{width:200px; height: 54px; background-image: url(../Images/vm-h-x6s-title-mini.jpg); background-size: 200px 54px;}

@media print, only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 144dppx) {
    #vivo-high .vivo-high-box .vivo-x6s .figure em.f1{  background-image: url(../Images/vm-h-x6s-figure1-x2.png);}
    #vivo-high .vivo-high-box .vivo-x6s .figure em.f2{  background-image: url(../Images/vm-h-x6s-figure2-x2.png);}
    #vivo-high .vivo-high-box .vivo-x6s .figure em.f3{  background-image: url(../Images/vm-h-x6s-figure3-x2.png);}
    #vivo-high .vivo-high-box .vivo-x6s .title h2{ background-image: url(../Images/vm-h-x6s-title-x2.jpg);}
    #vivo-high .vivo-high-box .vivo-xplay5a .title h2{background-image: url(../Images/vm-h-xplay5a-title-x2.png);}
    #vivo-high .vivo-high-box .vivo-xplay5a .figure{background-image: url(../Images/vm-h-xplay5a-figure-x2.png);}
    #vivo-high .vivo-high-box .vivo-xplay5a .marv{background-image: url(../Images/vm-h-xplay5a-marv-x2.png);}
}
/*x6s*/


/*xplay5*/
.vivo-high-box .vivo-xplay5{background: #fff;}
.vivo-high-box .vivo-xplay5 .vivo-h-stage{z-index: 2;}
.vivo-high-box .vivo-xplay5 .figure{width: 1520px;height: 1152px; top: 50%; margin-top: -500px; right: -15%; z-index: 2;  background-image: url(../Images/vm-h-xplay5-figure.jpg);  background-size: 1520px 1152px;}
.vivo-high-box .vivo-xplay5 .title{width: 350px;height: auto; top: 50%; margin-top: -90px; right: 0; z-index: 2;}
.vivo-high-box .vivo-xplay5 .title h2{display: block; position: relative; width: 280px; height: 88px; margin: auto; background-image: url(../Images/vm-h-xplay5-title.png); background-repeat: no-repeat; background-size: 280px 88px;}
.vivo-high-box  ul li.vivo-xplay5 .title .more span:after{background-position: -587px -137px;}
/*big*/
.big-h ul li.vivo-xplay5 .figure{width: 1900px;height: 1440px; top: 50%; margin-top: -700px; right: -30%; z-index: 2;  background-image: url(../Images/vm-h-xplay5-figure-big.jpg);  background-size: 1900px 1440px;}
.big-h ul li.vivo-xplay5 .title{margin-top: -100px; right: -5%;}
.big-h ul li.vivo-xplay5 .title h2{width: 350px; height: 110px; background-image: url(../Images/vm-h-xplay5-title-big.png); background-size: 350px 110px;}
/*small*/
.small-h ul li.vivo-xplay5 .figure{width: 1140px;height: 864px; top: 50%; margin-top: -400px; right: 0; z-index: 2;  background-image: url(../Images/vm-h-xplay5-figure-small.jpg);  background-size: 1140px 864px;}
.small-h ul li.vivo-xplay5 .title{margin-top: -60px; right: 5%;}
.small-h ul li.vivo-xplay5 .title h2{width: 210px; height: 66px; background-image: url(../Images/vm-h-xplay5-title-small.png); background-size: 210px 66px;}
/*mini*/
.mini-h ul li.vivo-xplay5 .figure{width: 760px;height: 576px; top: 50%; margin-top: -250px; right: 20%; z-index: 2;  background-image: url(../Images/vm-h-xplay5-figure-mini.jpg);  background-size: 760px 576px;}
.mini-h ul li.vivo-xplay5 .title{margin-top: -50px; right: 10%;}
.mini-h ul li.vivo-xplay5 .title h2{width:154px; height: 48px; background-image: url(../Images/vm-h-xplay5-title-mini.png); background-size: 154px 48px;}
/*xplay5*/











@-webkit-keyframes gogogo {
    0%{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-webkit-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-webkit-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
@-moz-keyframes gogogo {
    0%{-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
@keyframes gogogo {
    0%{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 0;}
    10%{opacity: 1;}
    60%{opacity: 1;}
    70%{-webkit-transform: translate3d(12px,0,0);-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
    100%{-webkit-transform: translate3d(12px,0,0);-moz-transform: translate3d(12px,0,0);transform: translate3d(12px,0,0); opacity: 0;}
}
/*big*/







/*media*/
@media screen and (max-width:1000px){
    .vivo-high-box ul li .vivo-h-stage{width: 100%;}
    .vivo-high-box .vivo-h1 .title{left: -280px;}
    .small-h ul li.vivo-h1 .figure{right: -380px;}
}

@media screen and (max-width:768px){
    .vivo-high-box ul li .vivo-h-stage{width: 100px;}
}
/*media*/

/*high*/

